<template>
  <div class="header">
    <div v-for="(v, i) in item" :key="i" class="box">
      <img :src="v.pic" alt="" />
      <p v-html="v.title"></p>
      <p>{{ v.descript }}</p>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props: {
    item: Object,
  },
  setup(props, { emit }) {
    return {};
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.header {
  height: 550px;
  overflow-x: auto;
  display: flex;
  width: 100%;
  .box {
    height: 100%;
    width: 710px;

    padding: 0 20px;
    margin-right: 20px;
    p {
      font-size: 30px;
      margin: 28px 0;
      &:nth-of-type(2) {
        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 26px;
        margin-top: 10px;
        color: #cccc;
      }
    }
  }
  img {
    height: 75%;
    border-radius: 20px;
    width: 710px;
    margin-right: 20px;
  }
}
</style>
